<script type="text/html" template lay-done="layui.data.done(d);">
    <div class="layui-form coreshop-form layui-form-pane" lay-filter="LAY-app-CoreCmsServices-createForm" id="LAY-app-CoreCmsServices-createForm">

        <div class="layui-form-item">
            <label for="title" class="layui-form-label  layui-form-required">项目名称</label>
            <div class="layui-input-block">
                <input name="title" lay-verify="required|verifytitle" class="layui-input" lay-reqText="请输入项目名称" placeholder="请输入项目名称" />
            </div>
        </div>

        <div class="layui-form-item">
            <label for="description" class="layui-form-label  layui-form-required">售价</label>
            <div class="layui-input-inline layui-inline-2">
                <input name="money" lay-verify="required|money" value="0.1" class="layui-input" placeholder="请输入售价" lay-reqText="请输入售价" />
            </div>
            <label for="thumbnail" class="layui-form-label  layui-form-required">项目缩略图</label>
            <div class="layui-input-inline layui-inline-8">
                <input name="thumbnail" id="thumbnailInput" lay-verify="required" class="layui-input" placeholder="请上传项目缩略图" lay-reqText="请上传项目缩略图" />
            </div>
            <div class="layui-input-inline">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="upBtnthumbnail" lay-active="doCropperImg">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="viewImgBoxthumbnail" src="{{ layui.setter.noImagePicUrl }}">
                        <p id="viewTextBoxthumbnail"></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="description" class="layui-form-label  layui-form-required">一句话概述</label>
            <div class="layui-input-block">
                <input name="description" lay-verify="required|verifydescription" class="layui-input" lay-reqText="请输入项目概述" placeholder="请输入项目概述" />
            </div>
        </div>

        <div class="layui-form-item">
            <label for="allowedMembership" class="layui-form-label  layui-form-required">允许会员</label>
            <div class="layui-input-block">
                <div id="selectBox" class="xm-select-demo"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="consumableStore" class="layui-form-label  layui-form-required">核销门店</label>
            <div class="layui-input-block">
                <div id="selectStoreBox" class="xm-select-demo"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="status" class="layui-form-label  layui-form-required">项目状态</label>
            <div class="layui-input-inline">
                <select name="status">
                    {{# layui.each(d.params.data.status, function(index, item){ }}
                    <option value="{{ item.value }}">{{ item.description }}</option>
                    {{# }); }}
                </select>
            </div>
            <label for="maxBuyNumber" class="layui-form-label  layui-form-required">重复购买数</label>
            <div class="layui-input-inline layui-inline-2">
                <input type="number" min="0" max="999999" name="maxBuyNumber" lay-verify="required|number" class="layui-input" value="0" placeholder="请输入项目重复购买次数" lay-reqText="请输入项目重复购买次数并为数字" />
            </div>
            <div class="layui-form-mid">0为不限制</div>
            <label for="amount" class="layui-form-label  layui-form-required">可销售数量</label>
            <div class="layui-input-inline layui-inline-2">
                <input type="number" min="0" max="999999" name="amount" lay-verify="required|number" class="layui-input" value="999" placeholder="请输入项目可销售数量" lay-reqText="请输入项目可销售数量并为数字" />
            </div>
            <div class="layui-form-mid">销售完售罄状态</div>
        </div>

        <div class="layui-form-item">
            <label for="startTime" class="layui-form-label  layui-form-required">可购买时间</label>
            <div class="layui-input-inline">
                <input name="startTime" id="createTime-CoreCmsServices-startTime" type="text" lay-verify="required|datetime" class="layui-input" placeholder="请输入项目开始时间" lay-reqText="请输入项目开始时间" value="{{layui.util.toDateString(new Date(), 'yyyy-MM-dd 00:00:00')	}}" />
            </div>
            <div class="layui-form-mid">至</div>
            <div class="layui-input-inline">
                <input name="endTime" id="createTime-CoreCmsServices-endTime" type="text" lay-verify="required|datetime" class="layui-input" placeholder="请输入项目截止时间" lay-reqText="请输入项目截止时间" value="{{layui.util.toDateString((new Date()).setFullYear((new Date()).getFullYear() + 1), 'yyyy-MM-dd 00:00:00')	}}" />
            </div>
            <div class="layui-form-mid">在此时间段内，前端才能进行显示并购买</div>
        </div>

        <div class="layui-form-item">
            <label for="validityType" class="layui-form-label  layui-form-required">有效期类型</label>
            <div class="layui-input-inline">

                <select name="validityType" id="validityType" lay-verify="required" lay-verify="required|number" lay-reqText="请选择核销有效期类型" lay-filter="validityTypeChange">
                    {{# layui.each(d.params.data.types, function(index, item){ }}
                    <option value="{{ item.value }}">{{ item.description }}</option>
                    {{# }); }}
                </select>
            </div>
            <div class="layui-form-mid">不限：购买后不限制核销服务券时间，限时间段：只能在允许的时间段内进行服务券的核销消费。</div>
        </div>

        <div class="layui-form-item" style="display: none;" id="validityBox">
            <label for="validityStartTime" class="layui-form-label">核销时间段</label>
            <div class="layui-input-inline">
                <input name="validityStartTime" id="createTime-CoreCmsServices-validityStartTime" type="text" class="layui-input" placeholder="请输入核销开始时间" lay-reqText="请输入核销开始时间" />
            </div>
            <div class="layui-form-mid">至</div>
            <div class="layui-input-inline">
                <input name="validityEndTime" id="createTime-CoreCmsServices-validityEndTime" type="text" class="layui-input" placeholder="请输入核销结束时间" lay-reqText="请输入核销结束时间" />
            </div>
            <button type="button" class="layui-btn" lay-active="e1">三月内</button>
            <button type="button" class="layui-btn" lay-active="e2">半年内</button>
            <button type="button" class="layui-btn" lay-active="e3">一年内</button>
        </div>

        <div class="layui-form-item">
            <label for="ticketNumber" class="layui-form-label  layui-form-required">服务券数量</label>
            <div class="layui-input-inline layui-inline-2">
                <input type="number" min="0" max="999999" name="ticketNumber" lay-verify="required|number" class="layui-input" value="12" placeholder="请输入核销服务券数量" lay-reqText="请输入核销服务券数量并为数字" />
            </div>
            <div class="layui-form-mid">购买服务项目后，将按照此数量发送服务券。到店使用服务券上的核销码进行核销消费</div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label for="contentBody" class="layui-form-label  layui-form-required">详细说明</label>
            <div class="layui-input-block" id="contentBody">
            </div>
        </div>

        <div class="layui-form-item text-right">
            <input type="button" class="layui-btn" lay-submit lay-filter="LAY-app-CoreCmsServices-createForm-submit" id="LAY-app-CoreCmsServices-createForm-submit" value="确认添加">
        </div>
    </div>
</script>
<script>
    var debug = layui.setter.debug;
    layui.data.done = function (d) {
        //开启调试情况下获取接口赋值数据
        if (debug) { console.log(d.params.data); }
        layui.use(['admin', 'form', 'laydate', 'coreHelper', 'cropperImg', 'xmSelect', 'util'],
            function () {
                var $ = layui.$
                    , form = layui.form
                    , admin = layui.admin
                    , laydate = layui.laydate
                    , cropperImg = layui.cropperImg
                    , xmSelect = layui.xmSelect
                    , util = layui.util
                    , coreHelper = layui.coreHelper;

                var selectBox = xmSelect.render({
                    el: '#selectBox',
                    tips: '请选择用户级别?',
                    name: 'allowedMembership',
                    layVerify: 'required',
                    prop: {
                        name: 'title',
                        value: 'id',
                    },
                    data: d.params.data.userGrade
                })

                var selectStoreBox = xmSelect.render({
                    el: '#selectStoreBox',
                    tips: '请选择核销门店?',
                    name: 'consumableStore',
                    layVerify: 'required',
                    prop: {
                        name: 'storeName',
                        value: 'id',
                    },
                    data: d.params.data.stores
                })

                //加载编辑器
                var Authorization = layui.data(layui.setter.tableName)[layui.setter.request.tokenName];
                editor = CKEDITOR.replace('contentBody', {
                    fileTools_requestHeaders: {
                        'Authorization': Authorization
                    }
                });

                //项目缩略图图片上传
                $('#upBtnthumbnail').click(function () {
                    cropperImg.cropImg({
                        aspectRatio: 1 / 1,
                        imgSrc: $('#viewImgBoxthumbnail').attr('src'),
                        onCrop: function (data) {
                            var loadIndex = layer.load(2);
                            coreHelper.Post("api/Tools/UploadFilesFByBase64", { base64: data }, function (res) {
                                if (0 === res.code) {
                                    $('#viewImgBoxthumbnail').attr('src', res.data.fileUrl);
                                    $("#thumbnailInput").val(res.data.fileUrl);
                                    layer.msg(res.msg);
                                    layer.close(loadIndex);
                                } else {
                                    layer.close(loadIndex);
                                    layer.msg(res.msg, { icon: 2, anim: 6 });
                                }
                            });
                        }
                    });
                });

                laydate.render({
                    elem: '#editTime-CoreCmsServices-startTime',
                    type: 'datetime'
                });
                laydate.render({
                    elem: '#editTime-CoreCmsServices-endTime',
                    type: 'datetime'
                });
                laydate.render({
                    elem: '#editTime-CoreCmsServices-validityStartTime',
                    type: 'datetime'
                });
                laydate.render({
                    elem: '#editTime-CoreCmsServices-validityEndTime',
                    type: 'datetime'
                });

                form.verify({
                    money: [/((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/, '请输入金额'],
                    verifytitle: [/^[\S]{0,50}$/, '项目名称最大只允许输入50位字符，且不能出现空格'],
                    verifythumbnail: [/^[\S]{0,255}$/, '项目缩略图最大只允许输入255位字符，且不能出现空格'],
                    verifydescription: [/^[\S]{0,255}$/, '项目概述最大只允许输入255位字符，且不能出现空格'],
                    verifyallowedMembership: [/^[\S]{0,50}$/, '允许购买会员级别最大只允许输入50位字符，且不能出现空格'],
                });

                form.on('select(validityTypeChange)', function (data) {
                    console.log(data.value);
                    if (data.value == 2) {
                        $('#validityBox').show();
                    } else {
                        $('#validityBox').hide();
                        $('#createTime-CoreCmsServices-validityStartTime').val("");
                        $('#createTime-CoreCmsServices-validityEndTime').val("");
                    }
                });

                //处理属性 为 lay-active 的所有元素事件
                util.event('lay-active', {
                    e1: function () {
                        $('#createTime-CoreCmsServices-validityStartTime').val(layui.util.toDateString(new Date(), 'yyyy-MM-dd 00:00:00'));
                        $('#createTime-CoreCmsServices-validityEndTime').val(layui.util.toDateString((new Date()).setMonth((new Date()).getMonth() + 3), 'yyyy-MM-dd 00:00:00'));
                    }
                    , e2: function () {
                        $('#createTime-CoreCmsServices-validityStartTime').val(layui.util.toDateString(new Date(), 'yyyy-MM-dd 00:00:00'));
                        $('#createTime-CoreCmsServices-validityEndTime').val(layui.util.toDateString((new Date()).setMonth((new Date()).getMonth() + 6), 'yyyy-MM-dd 00:00:00'));
                    }
                    , e3: function () {
                        $('#createTime-CoreCmsServices-validityStartTime').val(layui.util.toDateString(new Date(), 'yyyy-MM-dd 00:00:00'));
                        $('#createTime-CoreCmsServices-validityEndTime').val(layui.util.toDateString((new Date()).setFullYear((new Date()).getFullYear() + 1), 'yyyy-MM-dd 00:00:00'));
                    }
                });

                //重载form
                form.render(null, 'LAY-app-CoreCmsServices-createForm');
            })
    };
</script>